<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection" />
<title>隐患列表-地图模式</title>
<link rel="stylesheet" href="../../css/s_plus.css" />
<link rel="stylesheet" href="../../css/base.css" />
<link rel="stylesheet" href="../../css/layout.css" />
<link rel="stylesheet" href="../../css/choice.css" />
<link rel="stylesheet" href="../../css/hui.css" />

<script type="text/javascript" src="../../libs/vue.js" ></script>
<script type="text/javascript" src="../../js/jquery.1.9.1.min.js" ></script>
<script type="text/javascript" src="../../js/app/url.js" ></script>
<script type="text/javascript" src="../../libs/hui.js" ></script>
<script type="text/javascript" src="../../js/app/api.js"></script>
<script type="text/javascript" src="../../js/control/pop.js"></script>
<script type="text/javascript" src="../../js/md5.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=a82yNQICnHARgGpKuPH1wWZWQcBD2Llo"></script>
<style>
	
		/*隐藏百度地图 底部LOGO*/
			.BMap_cpyCtrl {
				display: none;
			}
			
			.anchorBL {
				display: none;
			}
</style>
</head>
<body class="bg_gray">
	
	<div id="wrapper">
<header class="f_l maxbox subhead">
  <a class="back"  @click="back"><i class="iconfont">&#xe605;</i></a>
  <h1>隐患列表(GIS地图)</h1>
  <a class="f_r arrow_r" ><i class="iconfont">&#xe611;</i></a>
  <!--<ul class="head_nav">
   <li><a @click="gisMap">地图模式</a></li>
    <li><a @click="ins_list">列表模式</a></li>
  </ul>-->
</header>
  <section class="f_l maxbox map">
    <!--<div class="f_l searchbar">
      <input class="search_key" name="" type="text" placeholder="请输入关键字">
      <button class="search_btn" name=""><i class="iconfont">&#xe63e;</i></button>
    </div>-->
    <!--<img src="../../images/map.jpg">-->
            		<div id="allmap" style="width: 100%;height:500px"></div>

  </section>
  <section class="f_l maxbox work_list" style="display: none;">
 
    <dl>
          <a @click="go(risk.id)">
            <dt>
              <i class="iconfont bg_red">&#xe60f;</i>
              <b>{{risk.content}}</b>
            </dt>
            <dd class="txt_list">
          
              
              <p><em>处理状态：</em>{{showState(risk.state)}} &nbsp;&nbsp;  <em>隐患等级：</em>{{showLevel(risk.level)}}</p>
    <p><em>隐患类型：</em>{{showType(risk.type)}}&nbsp;&nbsp; <em>影响半径：</em>{{risk.radius}}</p>
  <!--<p><em>隐患地点：</em>{{risk.address}}
  </p>-->
              
            </dd>
          </a>
        </dl>
    
  </section>
  </div>
    <script>
   
   
  
$(function(){
	   	//屏幕高度减去 头部和底部DIV高度 设置地图控件高度
	var head=	$(".subhead").height();
	var foot=	$(".work_list").height();
    var pageHeight=$(document).height();  
    var mapHeight = pageHeight - (head);
    $("#allmap").height(mapHeight);
   	
   	 	
    // 百度地图API功能
			var map = new BMap.Map("allmap");
			var point = new BMap.Point(112.9453203518,28.2340227593);
			map.centerAndZoom(point, 12);
			map.enableScrollWheelZoom(false);


			var geolocation = new BMap.Geolocation();
			geolocation.getCurrentPosition(function(r) {
//				console.log(r.point)
				if(this.getStatus() == BMAP_STATUS_SUCCESS) {
					
//			var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/fox.gif", new BMap.Size(300,157));
				var myIcon = new BMap.Icon("../../images/danger01.png", new BMap.Size(300,157));
					var mk = new BMap.Marker(r.point,{icon:myIcon});
					mk.addEventListener("click",attribute);
					
					function attribute(){
							var p = mk.getPosition();  //获取marker的位置
							alert("marker的位置是" + p.lng + "," + p.lat);    
						
						}					
					
//					map.addOverlay(mk); //标出所在地
//					map.panTo(r.point); //地图中心移动

					
					var point = new BMap.Point(r.point.lng, r.point.lat); //用所定位的经纬度查找所在地省市街道等信息
					var gc = new BMap.Geocoder();
					gc.getLocation(point, function(rs) {
						var addComp = rs.addressComponents;
					
//						console.log(rs.address); //地址信息
						//alert(rs.address);//弹出所在地址

					});
				} else {
					alert('定位失败，请检查您的手机定位功能是否打开' + this.getStatus());
				}
			}, {
				enableHighAccuracy: true
			});
			
			
			
					
			
			
	loadZDList();
function loadZDList(){
		
					var path = urlManager.getCheckTrouble();
				  	var username=	localStorage.getItem("username");
					var sec= localStorage.getItem("sec_pwd");
				  	var time = apiManage.getNow();
				  	var key = "loginName="+username+"&passWord="+sec+"&time="+time;
				  	var paramKey=hex_md5(key);
				  	var jsonParam = JSON.stringify({loginName:username,time:time,key:paramKey});
				  	console.log(jsonParam);
					
					var params= {startTime:sp.startTime,endTime:sp.endTime};

				   console.log("path:0-----------  "+path);
				   hui.loading("");
				  		$.ajax({
		         type: "GET",
		         url: path,
		         datas:params,
		         beforeSend: function(request) {
		            request.setRequestHeader("loginName",username);
		            request.setRequestHeader("time",time);
		            request.setRequestHeader("sign",paramKey);
		            request.setRequestHeader("Content-Type","application/text");
		
		         },
		         success: function(result) {
		         	hui.closeLoading();
		          	console.log("隐患列表 地图模式:"+JSON.stringify(result));
			
//			    $(".work_list").show();
						if(result!=null){
//									sp.task = result.checkTask;
									sp.lists = result.data;
									settingMarker();
						}

						}		 
		             
		         
		     });
				  
			}
			
			
			
			
	//头部点击显示与隐藏
	$(".arrow_r").on("click",(function(){
//		$(".head_nav").toggle();
//			localStorage.setItem("zdList",null);
			hui.open("risk.html?time"+apiManage.getNow(), {}, true, {});
	}
	));
	
	
				
				function settingMarker() {
				
					if(sp.lists != null && sp.lists.length > 0) {
					for(var i = 0; i < sp.lists.length; i++) {
								var object = sp.lists[i];
								if(i==sp.lists.length-1){
									object.over=true;
								}
								addMarker(object);
				
							}
						}
				
				}


			//标记
			function addMarker(cell){

				
					var point = new BMap.Point(cell.longitude,cell.latitude);
					var myIcon = new BMap.Icon("../../images/danger01.png", new BMap.Size(300,157));
					var mk = new BMap.Marker(point,{icon:myIcon});
//					var label = new BMap.Label("我是文字标注哦",{offset:new BMap.Size(20,-10)});
//					mk.setLabel(label);
					
					mk.addEventListener("click",attribute);
								map.addOverlay(mk); //标出所在地
								if(cell.over){
									map.panTo(point); //地图中心移动
									
								}
									
					function attribute(){
							$(".work_list").show();
							$("#allmap").height(mapHeight-foot);
						
							var p = mk.getPosition();  //获取marker的位置
						      sp.risk=cell;

						}					

			}
	
			
});
   	
   	
   		var sp = new Vue({
				el:"#wrapper",
				data:{
					startTime:"2018-9-1",
					endTime:"2018-10-1",
					lists:[],
					risk:{},
					zhongduan:{}
				},
				mounted: function() {
					var nowdate = new Date();
			        var y = nowdate.getFullYear();
			        var m = nowdate.getMonth()+1;
			        var d = nowdate.getDate();
			        var formatnowdate1 = y+'-'+m+'-'+d;
			        this.startTime=formatnowdate1;
			         console.log(formatnowdate1);
			
			        //获取系统前一个月的时间
			        nowdate.setMonth(nowdate.getMonth()-1);
			        var y = nowdate.getFullYear();
			        var m = nowdate.getMonth()+1;
			        var d = nowdate.getDate();
			        var formatwdate2 = y+'-'+m+'-'+d;
		            this.startTime=formatwdate2;
		        	console.log(formatwdate2);
      				},
					methods:{
						
						detail:function(riskId){
							localStorage.setItem("pid",riskId);
							hui.open("risk_show.html", {}, true, {});	

						},
						address:function(){
							
						},
						go:function(pid){
	
						localStorage.setItem("pid",pid);
						hui.open("risk_show.html", {}, true, {});	
				},
						back:function(){
								hui.open("inspection.html", {}, true, {});	

						},
						showStatus:function(status){
	
					if(status=='0'){
						return "无告警	";
					}
					else if(status=='1'){
						return "一般告警";
					}
						else if(status=='2'){
						return "严重告警";
					}
					else{
						return "工单处理";

					}
				},
						
						geshi:function(param){
							return formatTime(param);
						},
							showLevel:function(param){
							// 	 隐患等级 0：一般， 1：严重 2:其他

							if(param=='0'){
								return "一般";
							}
							else if(param=='1'){
								return "严重";
							}
							else{
								return "其他";
							}
						},
						
							showType:function(param){
							// 数据字典 隐患类型 0：第三方施工 1：违章占压 2：其他
							if(param=='0'){
								return "第三方施工";
							}
							else if(param=='1'){
								return "违章占压";
							}
							else{
								return "其他";
							}
						},
							showState:function(param){
							//处理状态 0未处理 1处理中 2已处理
							if(param=='0'){
								return "未处理";
							}
							else if(param=='1'){
								return "处理中";
							}
							else{
								return "已处理";

							}
						},
						
						show:function(zdCode){
							localStorage.setItem("zdCode",zdCode);
							hui.open("alerm_show.html?time"+apiManage.getNow(), {}, true, {});	
						},
					
					
						gisMap:function(){
							hui.open("inspection_map.html", {}, true, {});
						}
						,
						ins_list:function(){
							hui.open("inspection_list.html", {}, true, {});
						}
				
					}
					
	
				});
			


	
	
	
	

	
  
  	
  </script>
</body>
</html>